import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as promise from 'redux-promise';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, hashHistory } from 'react-router';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import * as createLogger from 'redux-logger';

import Home from './components/home';
import './less/main.less';
import reducers from './reducers';


const loggerMiddleware = createLogger();
const createStoreWithMiddleware = applyMiddleware(
    thunk,
    promise,
    loggerMiddleware
)(createStore);

const initialStore = {
    todos: []
};
const store = createStoreWithMiddleware(reducers, initialStore);

class AppRouter extends React.Component<NoneProps, NoneStates> {
    render() {
        return (
            <Router history={hashHistory}>
                <Route path='/' component={Home} />
            </Router>
        );
    }
}

class App extends React.Component<NoneProps, NoneStates> {
    render() {
        return (
            <Provider store={store}>
                <AppRouter />
            </Provider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
